<template>
    <div class="storebaseset">
        <div class="outmain ba_f">
            <el-form ref="form" :model="form" label-width="180px">
                <div class="shuju_title mar_b20">
                    <div class="shuju_title_text">
                        <span>基本信息</span>
                    </div>
                    <div class="ab r0 t0 mar_r20 mar_t5">
                        <el-button type="primary" size="mini" @click="submitForm(1)">编辑</el-button>
                    </div>
                </div>
                <div class="flex">
                    <el-form-item label="门店名称：" prop="name" class="wid40">
                        <div class="color_9">{{form.name}}</div>
                    </el-form-item>
                    <el-form-item label="门店ID：" prop="name">
                        <div class="color_9">{{form.id}}</div>
                    </el-form-item>
                </div>
                <div class="flex">
                    <el-form-item label="联系人：" prop="name" class="wid40">
                        <div class="color_9">{{form.storeLinkMan}}</div>
                    </el-form-item>
                    <el-form-item label="门店电话：" prop="name">
                        <div class="color_9">{{form.storeTel}}</div>
                    </el-form-item>
                </div>
                <div class="flex">
                    <el-form-item label="所属区域：" prop="name" class="wid40">
                        <div class="hiddencascader color_9">
                            <el-cascader v-model="form.cityArr" :options="data" size='medium' filterable
                                         disabled></el-cascader>
                        </div>
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="name">
                        <div class="color_9">{{form.address}}</div>
                    </el-form-item>
                </div>
                <div class="shuju_title mar_b20">
                    <div class="shuju_title_text">
                        <span>营业信息</span>
                    </div>
                    <div class="ab r0 t0 mar_r20 mar_t5">
                        <el-button type="primary" size="mini" @click="submitForm(2)">编辑</el-button>
                    </div>
                </div>
                <div class="flex">
<!--                    <el-form-item label="营业时间：" prop="name" class="wid40">-->
<!--                        <div class="color_9" v-show="form.timeType=='1'">24小时营业</div>-->
<!--                        <div class="color_9" v-show="form.timeType=='2'">-->
<!--                            <div v-for="(item,index) in form.timeArr" :key="index">-->
<!--                                {{item.startTime}}~{{item.endTime}}-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </el-form-item>-->
                  <el-form-item label="主营产品：" prop="name" class="wid40">
                    <div class="color_9">{{form.mainDishes}}</div>
                  </el-form-item>
                    <el-form-item label="门店简介：" prop="name">
                        <div class="color_9">{{form.introduction}}</div>
                    </el-form-item>
                </div>
                <div class="flex">
<!--                    <el-form-item label="主营菜品：" prop="name" class="wid40">-->
<!--                        <div class="color_9">{{form.mainDishes}}</div>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="人均消费：" prop="name" class="wid40">-->
<!--                        <div class="color_9">{{form.perCapita}}</div>-->
<!--                    </el-form-item>-->
                </div>
                <div class="flex">
                    <el-form-item label="商家环境：" prop="name">
                        <div v-if="form.environment" class="flex">
                            <div class="mar_l10" v-for="(item,index) in form.environment" :key="index">
                                <img :src="item" style="width: 100px;height: 100px;"/>
                            </div>
                        </div>
                    </el-form-item>
                </div>
                <div class="shuju_title mar_b20">
                    <div class="shuju_title_text">
                        <span>营业资质</span>
                    </div>
                    <div class="ab r0 t0 mar_r20 mar_t5">
                        <el-button type="primary" size="mini" @click="submitForm(3)">编辑</el-button>
                    </div>
                </div>
                <div class="flex">
                    <el-form-item label="商品安全档案：" prop="name" class="wid40">
                        <div v-if="form.foodRecords"  class="flex">
                            <div class="mar_l10" v-for="(item,index) in form.foodRecords" :key="index">
                                <img :src="item" style="width: 100px;height: 100px;"/>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="营业执照：" prop="name">
                        <div v-if="form.license"  class="flex">
                            <div class="mar_l10" v-for="(item,index) in form.license" :key="index">
                                <img :src="item" style="width: 100px;height: 100px;"/>
                            </div>
                        </div>
                    </el-form-item>
                </div>
                <div class="shuju_title mar_b20">
                    <div class="shuju_title_text">
                        <span>账号设置</span>
                    </div>
                    <div class="ab r0 t0 mar_r20 mar_t5">
                        <el-button type="primary" size="mini" @click="submitForm(4)">编辑</el-button>
                    </div>
                </div>
                <div class="flex">
                    <el-form-item label="登录账号：" prop="name" class="wid40">
                        <div class="color_9">{{form.userName}}</div>
                    </el-form-item>
                    <el-form-item label="绑定手机号：" prop="name">
                        <div class="color_9">{{form.bindTel}}</div>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
    import attachmentImg from "@/plugins/attachment-img";
    import {getStoreBasic, getStoreBusiness, getStoreAuth,getStoreAccount, getCity,} from "@/api/shop";
    import {mapState} from "vuex";

    export default {
        components: {attachmentImg,},
        computed: {
            ...mapState(['storeId']),
        },
        created() {
            // this.bus.$emit('loading', true);
            this.initt();
            this.init();
            this.init2();
            this.init3();
            this.init4();
        },
        data() {
            return {
                showCard: false,
                form: {
                    name: '',
                    storeNumber: '',
                    storeLinkMan: '',
                    storeTel: '',
                    address: '',
                    perCapita: '',
                    mainDishes: '',
                    introduction: '',
                    cityArr: [],
                    timeArr: [],
                    environment: [],
                    foodRecords: [],
                    license: [],
                    userName:'',
                    bindTel:'',
                },
                data: [],//门店区域
            }
        },
        methods: {
            async init() {
                const {data} = await getStoreBasic({id: this.storeId});
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                this.bus.$emit('loading', false)
            },
            async init2() {
                const {data} = await getStoreBusiness({id: this.storeId});
                this.form.timeType = data.info.timeType
                this.form.timeArr = data.info.timeArr
                this.form.perCapita = data.info.perCapita
                this.form.introduction = data.info.introduction
                this.form.mainDishes = data.info.mainDishes
                this.form.environment = data.info.environment
            },
            async init3() {
                const {data} = await getStoreAuth({id: this.storeId});
                this.form.foodRecords = data.info.foodRecords
                this.form.license = data.info.license
            },
            async init4() {
                const {data} = await getStoreAccount({id: this.storeId});
                this.form.userName = data.userName
                this.form.bindTel = data.phone
            },
            async initt() {
                const {data} = await getCity({type: 3});
                this.data = data
            },
            cascaderChange(e) {
                this.form.cityArr = e
            },
            enter(i = 0) {
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i = 0) {
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                // console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            imgadd2(url) {
                this.form.loadIcon = url.str
            },
            imgadd3(url) {
                this.form.forwardIcon = url.str
            },
            imgadd4(url) {
                this.form.shareIcon = url.str
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 5:
                            this.form2.environment.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                        case 2:
                            this.form.loadIcon = '';
                            break
                        case 3:
                            this.form.forwardIcon = '';
                            break
                        case 4:
                            this.form.shareIcon = '';
                            break
                    }
                }
            },
            submitForm(type) {
                switch (type) {
                    case 1:
                        this.$router.push({path: 'storebasesetedit1'})
                        break
                    case 2:
                        this.$router.push({path: 'storebasesetedit2'})
                        break
                    case 3:
                        this.$router.push({path: 'storebasesetedit3'})
                        break
                    case 4:
                        this.$router.push({path: 'storebasesetedit4'})
                        break
                }
            },
        }
    }
</script>
<style lang="scss">
    .storebaseset .hiddencascader .el-input.is-disabled .el-input__inner {
        background-color: #fff;
        border-color: #fff;
        color: #999;
    }

    .storebaseset .hiddencascader .el-input__suffix {
        display: none;
    }
</style>
